<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
	<title>jTopo Demo</title>
	<meta name="description" content="jTopo免费的基于HTML5 Canvas的网络拓扑、关系图形库">
	<meta name="keyword" content="jTopo 网络 拓扑 图形库 HTML5 Canvas 免费 关系图形库 javascript topology">
	
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link href="../css/jquery.snippet.min.css" rel="stylesheet">
	<script src="../js/jquery.js"></script>
	<script src="../js/site.js"></script>
	<script src="../js/demo.js"></script>
	
	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
	
	<script type="text/javascript" src="js/jtopo-min.js"></script>
	<script type="text/javascript" src="js/toolbar.js"></script>
	
	<script id='code'>
		var node;
		$(document).ready(function(){
			var canvas = document.getElementById('canvas');	
			
			var json = '{"version":"0.4.1","frames":24,"wheelZoom":null,"childs":[{"elementType":"scene","background":"./img/bg.jpg","backgroundColor":"255,255,255","mode":"normal","paintAll":false,"areaSelect":true,"translate":true,"translateX":24,"translateY":75,"lastTranslatedX":undefined,"lastTranslatedY":undefined,"alpha":0,"visible":true,"scaleX":1,"scaleY":1,"childs":[{"elementType":"node","x":120,"y":50,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Top_Left","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Top_Left","textOffsetX":0,"textOffsetY":0},{"elementType":"node","x":260,"y":50,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Top_Center","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Top_Center","textOffsetX":0,"textOffsetY":0},{"elementType":"node","x":400,"y":50,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Top_Right","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Top_Right","textOffsetX":0,"textOffsetY":0},{"elementType":"node","x":120,"y":190,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Middle_Left","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Middle_Left","textOffsetX":0,"textOffsetY":0},{"elementType":"node","x":260,"y":190,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Middle_Center","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Middle_Center","textOffsetX":0,"textOffsetY":0},{"elementType":"node","x":400,"y":190,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Middle_Right","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Middle_Right","textOffsetX":0,"textOffsetY":0},{"elementType":"node","x":120,"y":330,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Bottom_Left","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Bottom_Left","textOffsetX":0,"textOffsetY":0},{"elementType":"node","x":260,"y":330,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Bottom_Center","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Bottom_Center","textOffsetX":0,"textOffsetY":0},{"elementType":"node","x":400,"y":330,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Bottom_Right","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Bottom_Right","textOffsetX":0,"textOffsetY":0},{"elementType":"CircleNode","x":650,"y":200,"width":32,"height":32,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 0","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"左下偏移","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Middle_Center","textOffsetX":-30,"textOffsetY":30}]}]}';
			var stage = JTopo.createStageFromJson(json, canvas);
			//显示工具栏
			showJTopoToobar(stage);
			
			var jsonStr = stage.toJson();
			console.log(jsonStr);
		});
	</script>
  </head>

  <body>

	<center>
	<div class="wrap_div">
		<div class="head_nav">
			<h2 class="logo"><a href="index.html" title="jTopo">jTopo</a></h2>
		</div>		
		<div class="head_nav_second">			
			<ul class="menu" id="nav_menu">
			
			</ul>
		</div>
		<div class="content">
		  <div class="left">
			<ul id="menu">
			
			</ul>
		  </div>
		  <div class="right">
				<div id="content">					<canvas width="850" height="550" id="canvas"></canvas>	
									
				</div>
		  </div>
		  <div class="clear"></div>
		</div>
	</div>
	</center>
	<div class="footer">
		&nbsp;
	</div>

  <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1000418207'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1000418207%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</body>

</html>